<template>
  <div class="recommend">
    <div class="title"><span class="title-left">大家都在玩</span><router-link to="/classify" tag="span" class="title-right">更多<i class="icon iconfont icon-jiantouxi"></i></router-link></div>
    <ul class="item-list">
      <router-link tag="li" class="item border-bottom" v-for="item of RecommendList" to="" :key="item.id">
        <img class="item-img" :src="item.imgUrl" alt="">
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">点击下载</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      RecommendList: [
        {
          id: '001',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813120157/80499494570bf6d7b564af5c9371d32c.png',
          title: '英雄杀-送现金',
          desc: '《英雄杀》是由腾讯游戏倾力打造的一款卡牌策略桌游，将中国历史与桌面游戏进行了完美的“联姻”。以独有的方式展示了一个个鲜活的历史人物，一段段精彩的历史故事。除了经典“杀人”玩法，还拥有丰富的3V3、排位赛及好友组队等模式，更革新地融入英雄DIY、宝具搭配玩法，万千的关卡挑战，邀你一起智造英雄，杀出天下！'
        }, {
          id: '002',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813115608/78a0502e13be4ced5852d126168a138c.png',
          title: '全民水浒',
          desc: '《全民水浒》是腾讯第一策略卡牌手游。风格独特的画面，个性鲜明的武将，酣畅淋漓的战斗，丰富多变的技能，为您还原水浒的精彩故事!'
        }, {
          id: '003',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813135610/e2fb8c464a8e270a08512f08f514764c.png',
          title: '热血传奇-跨服新大陆',
          desc: '《热血传奇》是腾讯移动游戏与盛大游戏强强联手，以同名端游为基础，倾力打造的正版传奇手游。同时，游戏还注重操作手感，再加上精美又极具传奇风格的画面，力求为玩家打造指尖上真实震撼的战斗体验！'
        }, {
          id: '004',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813114709/5dacee15f18d749215ad4ae952924fa0.png',
          title: '火影忍者-疾风传',
          desc: '《火影忍者》手游100%正统还原原著剧情，疾风传篇章登场，十年百忍强力降临，玩家可以任意扮演鸣人、佐助、宇智波鼬等忍者，体验酣畅淋漓的忍术格斗连打和全屏奥义大招。此外，还可以进行跨服匹配2V2热血PK，参与无差别忍者格斗大赛，决出属于你的忍道！'
        }, {
          id: '005',
          imgUrl: 'http://game.zhishengwh.com/uploads/20180813134322/993e840576e65930fecea83591238b76.png',
          title: '天天富翁',
          desc: '《天天富翁》是一款由腾讯独家代理运营的全民互动休闲手游。玩“天天富翁”，与亿万微信/QQ好友一起轻松当富翁。'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .title
    overflow: hidden
    line-height: .8rem
    background: #f5f5f5
    padding: 0 .2rem
    .title-left
      float: left
    .title-right
      float: right
  .item-list
    margin: 0 .24rem
  .item
    overflow: hidden
    display flex
    height: 1.8rem
    .item-img
      width: 1.4rem
      height: 1.4rem
      padding: .2rem 0
      border-radius: .4rem
    .item-info
      flex: 1
      padding: .2rem 0 .2rem .2rem
      min-width: 0
      .item-title
        line-height: .5rem
        font-size: .32rem
        ellipse()
      .item-desc
        ellipse()
        color: #ccc
      .item-button
        line-height: .44rem
        background: #ff9300
        padding: 0 .2rem
        border-radius: .06rem
        margin-top: .1rem
        color: #fff
</style>
